<template>
  <div class="home">
    <h2>this is Home Page</h2>
    <div class="box">{{ msg }}</div>
    <input type="text" v-model="msg">
    <p>{{ name }}</p>
    <input type="button" @click="setName" value="按钮">
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data () {
    return {
      msg: 'hello'
    }
  },
  methods: {
    setName () {
      this.name = '张三'
      // 强制刷新DOM
      this.$forceUpdate()
    }
  },
  beforeCreate () {
    console.log('创建之前')
    console.log(this.msg)
  },
  created () {
    console.log('创建之后')
    console.log(this.msg)
    console.log(document.querySelector('.box'))
  },
  beforeMount () {
    console.log('挂载之前')
    console.log(document.querySelector('.box'))
  },
  mounted () {
    console.log('挂载之后')
    console.log(document.querySelector('.box'))
  },
  beforeUpdate () {
    console.log('DOM更新之前')
    console.log(document.querySelector('.box').innerHTML)
  },
  updated () {
    console.log('DOM更新之后')
    console.log(document.querySelector('.box').innerHTML)
  },
  beforeUnmount () {
    // 当从a组件切换到b组件时，a组件会被卸载

    console.log('卸载之前')
    console.log(document.querySelector('.box'))
  },
  unmounted () {
    console.log('卸载之后')
    console.log(document.querySelector('.box'))
  }
}
</script>
